<template>
  <div>
    <!--  -->
    <el-input
      v-model="thisValue"
      @change="change"
      :readonly="!isEdit"
      size="mini"
      v-if="control.type == 'string'"
    ></el-input>
    <!--  -->
    <el-input
      v-model="thisValue"
      @change="change"
      :readonly="!isEdit"
      type="number"
      size="mini"
      v-if="control.type == 'number'"
    ></el-input>
    <!--  -->
    <el-input
      v-model="thisValue"
      @change="change"
      :readonly="!isEdit"
      type="textarea"
      size="mini"
      v-if="control.type == 'textarea'"
    ></el-input>
    <!--  -->
    <el-checkbox-group
      @change="change"
      v-model="thisValue"
      :aria-readonly="!isEdit"
      v-if="control.type == 'checkbox'"
      size="mini"
    >
      <el-checkbox
        :label="item.value"
        :value="item.value"
        v-for="(item, index) in control.options"
        :key="item.value + index"
        >{{ item.label }}</el-checkbox
      >
    </el-checkbox-group>
    <!--  -->
    <el-radio-group
      v-model="thisValue"
      v-if="control.type == 'radio'"
      size="mini"
    >
      <el-radio
        :aria-readonly="!isEdit"
        @change="change"
        :label="item.value"
        v-for="(item, index) in control.options"
        :key="item.value + index"
        >{{ item.label }}</el-radio
      >
    </el-radio-group>

    <!-- 单选 -->
    <el-select
      @change="change"
      v-model="thisValue"
      :disabled="!isEdit"
      placeholder="请选择"
      v-if="control.type == 'select'"
      style="width: 100%"
      size="mini"
    >
      <el-option
        v-for="(item, index) in control.options"
        :key="item.value + index"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 多选 -->
    <el-select
      @change="change"
      v-model="thisValue"
      :disabled="!isEdit"
      placeholder="请选择"
      multiple
      v-if="control.type == 'multipleselect'"
      style="width: 100%"
      size="mini"
    >
      <el-option
        v-for="(item, index) in control.options"
        :key="item.value + index"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!--  -->

    <el-date-picker
      v-model="thisValue"
      @change="change"
      :readonly="!isEdit"
      size="mini"
      v-if="control.type == 'date'"
      style="width: 100%"
      type="date"
      placeholder="选择日期"
    >
    </el-date-picker>
    <!--  -->
    <el-time-select
      v-model="thisValue"
      @change="change"
      :readonly="!isEdit"
      size="mini"
      v-if="control.type == 'time'"
      style="width: 100%"
      placeholder="选择时间"
    >
    </el-time-select>
    <!--  -->
    <el-date-picker
      v-model="thisValue"
      @change="change"
      :readonly="!isEdit"
      size="mini"
      v-if="control.type == 'datetime'"
      style="width: 100%"
      type="datetime"
      placeholder="选择日期时间"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  props: {
    control: {
      type: Object,
      default() {
        return {
          //   span: 12,
          //   type: "string",
          //   field: "field",
          //   label: "label",
          //   default: "",
          //   options: [],
        };
      },
    },
    value: "",
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    event: "change",
    prop: "value",
  },
  data() {
    return {
      thisValue: "",
    };
  },
  watch: {
    value() {
      this.updateValue();
    },
  },
  mounted() {
    this.updateValue();
  },
  methods: {
    change(newValue) {
      this.$emit("change", newValue);
    },
    updateValue() {
      if (this.value) this.thisValue = this.value;
    },
  },
};
</script>

<style>
</style>